<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        #comment textarea {
            height: 100px;
        }
        
        #comment p span {
            color: red;
        }
    </style>
    <script src="jquery-3.1.1.js"></script>
</head>

<body>
    <div id="comment">

        <textarea></textarea>

        <p>你还可以输入<span>300</span>个字</p>

    </div>

    <script>
        $(function () {
            $(' #comment textarea ').keyup(function () {
                //输入字符后键盘up时触发事件
                var txtLeng = $(' #comment textarea ').val().length;      //把输入字符的长度赋给txtLeng
                //拿输入的值做判断
                if (txtLeng > 300) {
                    //输入长度大于300时span显示0
                    $(' #comment p span ').text(' 0 ');
                    //截取输入内容的前300个字符，赋给fontsize
                    var fontsize = $('#comment textarea').val().substring(0, 300);
                    //显示到textarea上
                    $(' #comment textarea ').val(fontsize);
                } else {
                    //输入长度小于300时span显示300减去长度
                    $('#comment p span').text(300 - txtLeng);
                }
            });
        });
    </script>
</body>

</html>